<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户管理</title>
<link rel="stylesheet" type="text/css" href="../css/default.css">
<link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.3.5/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/extends.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script>

$(function(){
	$("#").datagrid({
		height:$("#body").height()-$('#search_area').height()-5,
		width:$("#body").width(),
		idField:'userId',
		//data: data,
		url:"datagrid.json",  
		singleSelect:true, 
		nowrap:true,
		fitColumns:false,
		rownumbers:true,
		showPageList:false,
		columns:[[
			{field:'userName',title:'用户名',width:250,halign:"center", align:"left"},
			{field:'name',title:'姓名',width:250,halign:"center", align:"left"},
			{field:'sex',title:'性别',width:250,halign:"center", align:"left"},
			{field:'department',title:'部门',width:250,halign:"center", align:"left"}
			
		]],
		toolbar:'#tt_btn',  
        pagination:true,
		onDblClickRow:function(rowIndex, rowData){
			viewDetail(rowData.userId);
		}
	});
	
	//新增弹出框
	$("#save").on("click", function(){
		$parent("#parent_win").window({
			width:274,
			height:225,
			href:'user/addUser.html',
			title:'新增用户'
		});
	});
	//修改
	$("#update").on("click", function(){
		$parent.messager.alert("提示","update", "info");
	});
	//删除
	$("#delete").on("click", function(){
		$parent.messager.alert("提示","delete", "info");
	});
})

function viewDetail(date, id){
	$parent.messager.alert("提示","查询详细", "info");
}

//监听窗口大小变化
window.onresize = function(){
	setTimeout(domresize,300);
};
//改变表格宽高
function domresize(){
	$('#tt').datagrid('resize',{  
		height:$("#body").height()-$('#search_area').height()-5,
		width:$("#body").width()
	});
}
</script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body class="easyui-layout" >
<div id="body" region="center" > 
  <!-- 查询条件区域 -->
  <div id="search_area" >
    <div id="conditon">
      <table border="0">
        <tr>
          <td>用户名：</td>
          <td ><input  name="userName" id="userName"/></td>
          <td>&nbsp;性别：</td>
          <td><input  name="sex" id="sex" /></td>
          <td>&nbsp;部门：</td>
          <td><input  name="department" id="department"/></td>
          <td>
              <a  href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-search" plain="true">查询</a> 
              <a  href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-reset" plain="true" >重置</a>
          </td>
        </tr>
      </table>
    </div>
    <span id="openOrClose">111</span> 
  </div>

  <!-- 数据表格区域 -->
  <!-- 表格顶部工具按钮 -->
  <div id="tt_btn">
      <a href="javascript:void(0)"  id="save" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
      <a href="javascript:void(0)"  id="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a> 
      <a href="javascript:void(0)"  id="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
  </div>
    <div class="container-fluid">
	<div class="row">
		<div class="col-md-6" style="width: 95%;" align="center">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th width="20%">
							用户名
						</th>
						<th width="20%">
							姓名
						</th>
						<th width="20%">
							性别
						</th>
						<th width="20%">
							部门
						</th>
						<th width="10%"> </th>
						<th width="10%"> </th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							蕾姆
						</td>
						<td>
							小马
						</td>
						<td>
							女
						</td>
						<td>
							人事部
						</td>
						<td>
							<div class="col-md-3">
							    <button type="button" class="btn btn-success btn-xs">
								启用
							    </button>
							</div>
						</td>
						<td>
							<div class="col-md-3">
								<button type="button" class="btn btn-xs btn-default">
								作废
								</button>
							</div>
						</td>
					</tr>
					<tr class="active">
						<td>
							拉姆
						</td>
						<td>
							小赵
						</td>
						<td>
							男
						</td>
						<td>
							宣传部
						</td>
						<td>
							<div class="col-md-3">
							    <button type="button" class="btn btn-success btn-xs">
								启用
							    </button>
							</div>
						</td>
						<td>
							<div class="col-md-3">
								<button type="button" class="btn btn-xs btn-default">
								作废
								</button>
							</div>
						</td>
					</tr>
					<tr class="success">
						<td>
							雷因哈穆德
						</td>
						<td>
							小郭
						</td>
						<td>
							女
						</td>
						<td>
							制作部
						</td>
						<td>
							<div class="col-md-3">
							    <button type="button" class="btn btn-success btn-xs">
								启用
							    </button>
							</div>
						</td>
						<td>
							<div class="col-md-3">
								<button type="button" class="btn btn-xs btn-default">
								作废
								</button>
							</div>
						</td>
					</tr>
					<tr class="warning">
						<td>
							乌鲁奇奥拉
						</td>
						<td>
							小天
						</td>
						<td>
							男
						</td>
						<td>
							外交部
						</td>
						<td>
							<div class="col-md-3">
							    <button type="button" class="btn btn-success btn-xs">
								启用
							    </button>
							</div>
						</td>
						<td>
							<div class="col-md-3">
								<button type="button" class="btn btn-xs btn-default">
								作废
								</button>
							</div>
						</td>
					</tr>
					<tr class="danger">
						<td>
							saber
						</td>
						<td>
							云龙
						</td>
						<td>
							女
						</td>
						<td>
							执行部
						</td>
						<td>
							<div class="col-md-3">
							    <button type="button" class="btn btn-success btn-xs">
								启用
							    </button>
							</div>
						</td>
						<td>
							<div class="col-md-3">
								<button type="button" class="btn btn-xs btn-default">
								作废
								</button>
							</div>
						</td>
					</tr>
					<tr class="active">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td>
							<div class="col-md-3">
							    <button type="button" class="btn btn-success btn-xs">
								启用
							    </button>
							</div>
						</td>
						<td>
							<div class="col-md-3">
								<button type="button" class="btn btn-xs btn-default">
								作废
								</button>
							</div>
						</td>
					</tr>
					<tr class="active">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td>
							<div class="col-md-3">
							    <button type="button" class="btn btn-success btn-xs">
								启用
							    </button>
							</div>
						</td>
						<td>
							<div class="col-md-3">
								<button type="button" class="btn btn-xs btn-default">
								作废
								</button>
							</div>
						</td>
					</tr>
					<tr class="active">
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td>
							<div class="col-md-3">
							    <button type="button" class="btn btn-success btn-xs">
								启用
							    </button>
							</div>
						</td>
						<td>
							<div class="col-md-3">
								<button type="button" class="btn btn-xs btn-default">
								作废
								</button>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
</div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>	
</body>
</html>
